<script setup lang="ts">
import type { EnumCurrencyKey } from '~/apis/types'
import AppCurrencyIcon from '~/components/AppCurrencyIcon.vue'

const closeDialog = inject('closeDialog', () => { })
const appStore = useAppStore()
const {
  currentGlobalCurrency,
} = storeToRefs(appStore)
const { searchValue, renderBalanceList, hideZeroBalance, setHideZeroBalance, clearSearchValue } =
  useCurrencyData()

const cash = computed(() => {
  return renderBalanceList.value.filter(item => !application.isVirtualCurrency(item.type))
})
const virtual = computed(() => {
  return renderBalanceList.value.filter(item => application.isVirtualCurrency(item.type))
})
// 选择币种
function selectCurrency(item: EnumCurrencyKey, hide: () => void) {
  appStore.changeGlobalCurrency(item)
  hide()
}
function onSwitch() {
  setHideZeroBalance(hideZeroBalance.value)
  Local.set(STORAGE_HIDE_ZERO_BALANCE_KEY, hideZeroBalance.value)
}
</script>
<template>

  <div class="tabs-content mt-0 min-h-[500px] flex-auto bg-transparent sm:min-h-0">
    <div class="sticky -top-[1px] z-20 pt-4   bg-layer3  ">
      <BaseInput class="text-sm font-semibold" name="search-2" search v-model="searchValue" :placeholder="$t('search')">
        <template v-if="searchValue" #right-icon>
          <BaseIcon @click="clearSearchValue()" name="uni-close2" class="text-[.625rem]" />
        </template>
      </BaseInput>
    </div>
    <div class="my-1 flex-auto">
      <template v-if="renderBalanceList.length > 0">
        <div v-if="cash.length > 0"
          class="list-title z-10 font-extrabold text-secondary sticky bg-bg-black-3 py-[.625rem] pl-2 leading-[.875rem] dark:bg-layer2 sm:dark:bg-bg-black-3 top-[3.4375rem] sm:top-14">
          {{ $t('cash') }}
        </div>
        <div v-for="item of cash"
          class="fix-light-hover mb-1 flex cursor-pointer items-center rounded-lg px-2 py-[.625rem] !leading-5 hover:bg-bg-black-4"
          :class="{
            'bg-bg-black-4': item.type === currentGlobalCurrency
          }" :key="item.type" @click.stop="selectCurrency(item.type, closeDialog)">
          <AppCurrencyIcon :show-name="true" :currency-type="item.type" icon-align="left" />
          <div class="ml-auto text-right font-[600]">{{ item.type }} {{ item.balance }}</div>
        </div>

        <div v-if="virtual.length > 0"
          class="list-title z-10 font-extrabold text-secondary sticky bg-bg-black-3 py-[.625rem] pl-2 leading-[.875rem] dark:bg-layer2 sm:dark:bg-bg-black-3 top-[3.4375rem] sm:top-14">
          {{ $t('recharge_crypto_coin') }}
        </div>
        <div v-for="item of virtual"
          class="fix-light-hover mb-1 flex cursor-pointer items-center rounded-lg px-2 py-[.625rem] !leading-5 hover:bg-bg-black-4"
          :class="{
            'bg-bg-black-4': item.type === currentGlobalCurrency
          }" :key="item.type" @click.stop="selectCurrency(item.type, closeDialog)">
          <AppCurrencyIcon :show-name="true" :currency-type="item.type" icon-align="left" />
          <div class="ml-auto text-right font-[600]">{{ item.type }} {{ item.balance }}</div>
        </div>
      </template>
      <template v-else>
        <section class="py-10 text-center center flex-col min-h-21">
          <BaseImage class="w-[9.5rem]" url="/images/webp/home/empty.webp" />
          <div class="leading-[.875rem] mt-4">{{ $t('notfound_currency') }}</div>
        </section>
        <BaseButton class="button button-brand w-full">
          <BaseIcon name="transfer" /> <span>{{ $t('currency_exchange') }}</span>
        </BaseButton>
      </template>
    </div>
    <div class="sticky bottom-0 -mx-[.875rem] bg-bg-black-4 z-20 border-t border-[#e4eaf019] pb-sb">
      <div class="flex flex-none items-center p-[.875rem]">
        <BaseSwitch v-model="hideZeroBalance" size="xs" @change="onSwitch" />
        <div class="ml-[.375rem]">
          <span class="text-white font-[600]">{{ $t('hide_zero_wallet') }}</span>
          <span class="text-[var(--color-text-white-2)]">（{{ $t('zero_wallet_hidden') }}）</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
